<template>
    <!--
        根元素容器，用于包裹整个tab bar组件
        :class="systemStore.safeAreaBottomClass" 动态绑定安全区域底部类名，适配不同设备的安全区域
    -->
    <view :class="[ns.b(), systemStore.safeAreaBottomClass]">
        <!--
            tab bar主体容器，使用currentTabBarIndex作为key值用于强制刷新
        -->
        <view :key="currentTabBarIndex" class="content">
            <!-- 遮罩层，用于视觉效果 -->
            <view class="mask"></view>
            <!--
                遍历tab bar列表，渲染每个tab项
                :key="item.path" 使用路径作为唯一标识
                :class 动态绑定样式类，当当前索引匹配时添加active类
                @click 绑定点击事件，处理tab切换逻辑
            -->
            <view
                v-for="(item, index) in getTabBarList"
                :key="item.path"
                :class="{ 'tab-bar-item': true, active: currentTabBarIndex === index }"
                @click="onTabBarClick(item, index)"
            >
                <!-- 图标容器 -->
                <view class="icon">
                    <!--
                        tab图标，根据当前选中状态显示不同图标
                        :src 动态绑定图标路径，选中时显示激活状态图标
                    -->
                    <image :src="currentTabBarIndex === index ? item.icon_active : item.icon" class="icon-image" />
                </view>
                <!-- 标签文本 -->
                <view class="label">{{ item.name }}</view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { useSystemStore, useTabBarStore } from "@/store";
import type { TabBarType } from "@/store";
import { REPORT_EVENT_TYPE, useReportEvent } from "@/hooks/use-report-event";
import { useNamespace } from "@/hooks";

const ns = useNamespace("tab-ber");

const emits = defineEmits(["tabBar"]);

const systemStore = useSystemStore();

const { getTabBarList, currentTabBarIndex, setCurrentTabBar } = useTabBarStore();

/**
 * 处理tab bar点击事件
 * @param item - 被点击的tab bar项数据
 * @param index - 被点击的tab bar项索引
 */
const onTabBarClick = useThrottleFn((item: TabBarType, index: number) => {
    setCurrentTabBar(item);

    emits("tabBar", {
        index,
        item
    });

    useReportEvent(REPORT_EVENT_TYPE.BUTTON_CLICK_EVENT, {
        type: "tabbar",
        name: item.name
    });
}, 500);
</script>

<style scoped lang="scss">
@import "./index";
</style>
